<template>
	<view class="mx-my-student-card">
		<text class="student-name">{{course.user.nick_name}}</text>
		<view class="student-course">
			<text>课程：</text>
			<text class="student-course-item">{{course.course_name}}</text>
		</view>
		<view class="course-progress">
			<text>课程进度：</text>
			<MxCourseProgress :total="course.class_size" :completed="course.completed_lessons_length" />
		</view>
		<view class="course-time">
			<text>上课时间：</text>
			<text>{{class_time}}</text>
		</view>
	</view>
</template>

<script>
	import MxCourseProgress from '@/components/mine/member-course/MxCourseProgress.vue';
	export default {
		name:"MxMyStudentCard",
		components: {
			MxCourseProgress
		},
		props: {
			course: {
				type: Object
			}
		},
		data() {
			return {
				
			};
		},
		computed: {
			class_time() {
				const latest_lesson = this.course.latest_lesson
				if(latest_lesson) {
					return latest_lesson.class_date + ' ' + latest_lesson.class_time
				}
				return this.course.opening_date.split('~')[0] + ' ' + this.course.class_time
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/var.scss';
.mx-my-student-card{
	box-sizing: border-box;
	width: 100%;
	box-shadow: 0 0 6px 0 rgba($color: #000000, $alpha: .16);
	border-radius: 5px;
	background-color: #fff;
	box-sizing: border-box;
	padding: 36rpx;
	font-family: $font-family;
	color: $color-title;
	display: flex;
	flex-direction: column;
	
	.student-name{
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 24rpx;
	}
	
	.student-course, .course-progress{
		margin-bottom: 20rpx;
		
		.student-course-item{
			margin-right: 10rpx;
		}
	}
}
</style>
